<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 左侧商品、支付信息录入表单 -->
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品录入</span>
          </div>
          <el-form ref="enterItemForm" :model="enterItemForm" size="small" label-width="68px">
            <el-form-item label="商品编码" prop="itemSn">
              <el-input v-model="enterItemForm.itemSn" placeholder="请输入条码" clearable @keyup.enter.native="enterItem" />
            </el-form-item>
            <el-form-item label="订购数量" prop="quantity">
              <el-input v-model="enterItemForm.quantity" clearable @keyup.enter.native="enterItem" />
            </el-form-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-button type="primary" size="mini" :disabled="step!==2" @click="enterItem">ENTER ITEM</el-button>
              </el-col>
              <el-col :span="12">
                <el-button
                  type="warning"
                  size="mini"
                  :disabled="step !==2 || saleItemList.length == 0"
                  @click="endSale"
                >END SALE</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单支付</span>
          </div>
          <el-form ref="makePaymentForm" :model="makePaymentForm" size="small" label-width="68px">
            <el-form-item label="付款金额" prop="cashTendered">
              <el-input v-model="makePaymentForm.cashTendered" />
            </el-form-item>
            <el-form-item label="找零">
              <el-input v-model="changeDue" disabled />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" size="mini" :disabled="step!==4" @click="makePayment">MAKE PAYMENT</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 左侧商品、支付信息录入表单 -->
      <el-col :span="18" :xs="24">
        <el-descriptions border>
          <template slot="extra">
            <el-button type="success" size="small" round :disabled="step!==1" @click="makeNewSale">Make NEW SALE
            </el-button>
          </template>
          <el-descriptions-item label="会员">张三</el-descriptions-item>
          <el-descriptions-item label="订单号">{{ orderInfo.saleNo }}</el-descriptions-item>
          <el-descriptions-item label="总金额">{{ orderInfo.total }}</el-descriptions-item>
          <el-descriptions-item label="总件数">{{ orderInfo.quantity }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag size="small">{{ orderInfo.status }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注">暂无</el-descriptions-item>
        </el-descriptions>
        <br>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单明细</span>
          </div>
          <el-table :data="saleItemList" :row-class-name="rowSaleItemIndex">
            <el-table-column label="序号" align="center" prop="index" width="55" />
            <el-table-column label="商品编号" align="center" prop="itemSn" />
            <el-table-column label="商品名称" align="center" prop="productName" />
            <el-table-column label="价格" align="center" prop="price" />
            <el-table-column label="数量" align="center" prop="quantity">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.quantity"
                  size="mini"
                  :disabled="step!==2"
                  :min="1"
                  @change="handleChangeQuantity(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  :disabled="step!==2"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  makeNewSale,
  enterItem,
  endSale,
  makePayment,
  delSaleItem,
  updateSaleItem
} from '@/api/pos/sale'
export default {
  name: 'Sale',
  // 定义属性
  data() {
    return {
      // 当前步骤，用于控制按钮是否可用
      step: 1,
      enterItemForm: {},
      makePaymentForm: {},
      orderInfo: {},
      changeDue: 0,
      saleItemList: []
    }
  },
  // 计算属性
  computed: {},
  // 监控data变化
  watch: {},
  // 生命周期-创建完成
  created() {},
  // 生命周期-挂载完成
  mounted() {},
  // 方法集合
  methods: {
    // 步骤1：创建订单
    makeNewSale() {
      this.clear()
      this.step = 2
      makeNewSale().then(response => {
        this.orderInfo = response.data
      })
    },
    // 步骤2：提交输入商品
    enterItem() {
      // 仅用于测试
      // this.saleItemList.push({itemSn: 1001, productName: '钢笔', price: '60.00', quantity: 2});
      enterItem(this.enterItemForm).then(response => {
        const saleItem = response.data
        const index = this.saleItemList.findIndex((item) => item.itemSn === this.enterItemForm.itemSn)
        if (index === -1) {
          this.saleItemList.push(saleItem)
          console.log(-1)
        } else {
          this.saleItemList[index].quantity = Number(this.saleItemList[index].quantity) + Number(this
            .enterItemForm.quantity)
        }
      })
    },
    // 步骤3：结束输入
    endSale() {
      this.step = 4
      endSale().then(response => {
        this.orderInfo.total = response.data
        let quantityTotal = 0
        this.saleItemList.forEach((item) => {
          quantityTotal = Number(quantityTotal) + Number(item.quantity)
        })
        this.orderInfo.quantity = quantityTotal
      })
    },
    // 步骤4：提交支付
    makePayment() {
      this.step = 1
      makePayment(this.makePaymentForm).then(response => {
        const res = response.data
        if (res >= 0) {
          this.changeDue = response.data
        } else {
          this.$message('余额不足')
        }
      })
    },
    // 修改一行订单明细数量
    handleChangeQuantity(row) {
      updateSaleItem(row).then(response => {
        console.log('修改数量成功')
      })
    },
    // 删除一行订单明细
    handleDelete(index, row) {
      this.$confirm('确定删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.saleItemList.splice(index, 1)
        delSaleItem(row.itemSn).then(response => {
          console.log(response.data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 清空界面数据
    clear() {
      this.orderInfo = {}
      this.saleItemList = []
      this.enterItemForm = {
        itemSn: '',
        quantity: 1
      }
      this.makePaymentForm = {
        cashTendered: 0
      }
      this.changeDue = 0
      this.step = 1
    },
    // 为table订单明细添加序号
    rowSaleItemIndex({
      row,
      rowIndex
    }) {
      row.index = rowIndex + 1
    }

  }
}
</script>

<style scoped>
</style>
